<template>
  <div :id="id" style="height: 30vh;width: 100%;"></div>
</template>
<script>
import * as echarts from "echarts";
require("echarts"); // echarts theme
export default {
  name: "pieEchart",
  data() {
    return {
      chart: null,
      options: {},
      max: "", //最大value值
      min: "", // 最小value值
      type: 0
    };
  },
  props: {
    listData: {
      type: Array,
      default: () => []
    },
    id: {
      type: String,
      default: "pp2"
    }
  },
  watch: {
    listData: {
      handler(val, newVal) {
        this.initOptions(val);
        this.initCharts();
      },
      deep: true,
      immediate: true
    }
  },
  created() {
    // this.getData();
  },
  mounted() {
    setTimeout(() => {
      this.initOptions();
      this.initCharts();
    }, 1000);
    // this.initOptions(this.listData);
    // this.initCharts();
  },
  methods: {
    initOptions(list) {
      // this.options = {
      //   tooltip: {
      //     trigger: "item"
      //   },
      //   legend: {
      //     // top: "10%",
      //     left: "center"
      //   },
      //   series: [
      //     {
      //       name: "分险等级",
      //       type: "pie",
      //       radius: ["35%", "60%"],
      //       avoidLabelOverlap: false,
      //       label: {
      //         show: false,
      //         position: "center"
      //       },
      //       emphasis: {
      //         label: {
      //           show: true,
      //           fontSize: 40,
      //           fontWeight: "bold"
      //         }
      //       },
      //       labelLine: {
      //         show: false
      //       },
      //       data: [
      //         { value: 735, name: "需要整改企业 35%" },
      //         { value: 580, name: "需要整改厂房 34%" },
      //         { value: 484, name: "需要整改商户 31%" }
      //       ]
      //       // data: list
      //     }
      //   ]
      // };
      this.options = {
        angleAxis: {},
        radiusAxis: {
          type: "category",
          data: ["不合", "合格", "抽查", "总数"],
          z: 10
        },
        // title: {
        //   text: "食品流通主体"
        // },
        polar: {},
        series: [
          {
            type: "bar",
            data: [1, 2, 3, 4],
            coordinateSystem: "polar",
            name: "企业数",
            stack: "a",
            emphasis: {
              focus: "series"
            }
          },
          {
            type: "bar",
            data: [1, 4, 6, 8],
            coordinateSystem: "polar",
            name: "个体工商数",
            stack: "a",
            emphasis: {
              focus: "series"
            }
          }
          // {
          //   type: "bar",
          //   data: [2, 3, 4],
          //   coordinateSystem: "polar",
          //   name: "C",
          //   stack: "a",
          //   emphasis: {
          //     focus: "series"
          //   }
          // }
        ],
        legend: {
          show: true,
          data: ["企业数", "个体工商数"]
        }
      };
    },
    initCharts() {
      this.chart = echarts.init(document.getElementById(this.id));
      this.chart.setOption(this.options, true);
    }
  }
};
</script>
